<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Agents | AI驱动的开发代理集合</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-bg {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .prose {
            max-width: 850px;
        }
        .prose h2 {
            position: relative;
            padding-left: 1rem;
        }
        .prose h2:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.5em;
            height: 1em;
            width: 4px;
            background: linear-gradient(to bottom, #6e8efb, #a777e3);
            border-radius: 2px;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background: #2d3748;
            border-radius: 0.5rem;
        }
        .code-block pre {
            white-space: pre-wrap;
            word-break: break-word;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">Claude Agents</h1>
                    <p class="text-xl md:text-2xl font-light mb-8 opacity-90">75+专业化AI子代理集合，革新你的开发流程</p>
                    <p class="text-lg mb-8 opacity-90">专为Claude Code设计的开源子代理集合，覆盖软件开发全生命周期，通过自动化任务分配和多代理协作，显著提升开发效率。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/wshobson/agents" class="bg-white text-purple-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub项目
                        </a>
                        <a href="#getting-started" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-700 px-6 py-3 rounded-lg font-medium transition duration-300">
                            快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="bg-white rounded-xl shadow-xl p-6 max-w-md w-full">
                        <div class="mermaid">
                            graph TD
                            A[开发者输入任务] --> B{任务分析}
                            B -->|后端| C[backend-architect]
                            B -->|前端| D[frontend-developer]
                            B -->|DevOps| E[devops-engineer]
                            C --> F[生成API设计]
                            D --> G[构建UI组件]
                            E --> H[配置部署]
                            F & G & H --> I[context-manager]
                            I --> J[完整解决方案]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="prose mx-auto">
                <h2 class="text-3xl font-bold mb-8">它能解决什么问题？</h2>
                <p class="text-lg mb-6">开发者在使用传统开发工具或AI辅助编码时，常面临任务分配复杂、上下文切换频繁、领域专精不足等问题。</p>
                
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 text-purple-700 rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <h3 class="text-xl font-semibold">传统工具痛点</h3>
                        </div>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-circle text-xs text-purple-500 mt-1 mr-2"></i>
                                <span>Jira等工具需要手动配置，难以自动化</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-xs text-purple-500 mt-1 mr-2"></i>
                                <span>单一AI模型缺乏领域专精优化</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-circle text-xs text-purple-500 mt-1 mr-2"></i>
                                <span>手动协调跨角色工作流耗时易错</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-purple-50 p-6 rounded-xl">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <h3 class="text-xl font-semibold">Claude Agents解决方案</h3>
                        </div>
                        <p class="text-purple-800 font-medium mb-4">通过预配置的领域专精子代理和智能任务分配，简化开发流程，提升代码质量和协作效率。</p>
                        <div class="flex items-center">
                            <div class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-medium mr-2">75+子代理</div>
                            <div class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-medium">智能分配</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">专为现代开发流程设计的强大功能集</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">自动任务分配</h3>
                    <p class="text-gray-600">根据任务上下文自动调用适合的子代理，如backend-architect或frontend-developer，减少手动选择时间。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">领域专精子代理</h3>
                    <p class="text-gray-600">75+子代理覆盖后端、前端、DevOps、AI开发等，各优化特定任务如API设计、React开发或安全审计。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">多代理协作</h3>
                    <p class="text-gray-600">支持顺序执行、并行处理或混合模式，高效处理复杂任务。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">上下文管理</h3>
                    <p class="text-gray-600">通过context-manager代理跨多子代理保持上下文一致性，确保项目连贯性。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">文档与可视化</h3>
                    <p class="text-gray-600">包括docs-architect和mermaid-expert，自动生成技术文档和流程图。</p>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">开源与本地化</h3>
                    <p class="text-gray-600">基于AGPL-3.0许可，数据本地存储，无需云端依赖，注重隐私保护。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="prose mx-auto">
                <h2 class="text-3xl font-bold mb-8">使用场景</h2>
                
                <div class="space-y-12">
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">1</div>
                            <h3 class="text-xl font-semibold">全栈功能开发</h3>
                        </div>
                        <p class="mb-4">一个小型团队开发用户仪表板。Claude Agents使用backend-architect设计REST API，frontend-developer构建React组件，test-automator生成测试用例，security-auditor审查漏洞，整个流程自动化协调，节省开发时间。</p>
                        <div class="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
                            <p class="text-purple-700 font-medium flex items-start">
                                <i class="fas fa-question-circle mt-1 mr-2"></i>
                                <span>思考问题：你的项目中哪些重复性任务可以通过Claude Agents的多代理协作来自动化？</span>
                            </p>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">2</div>
                            <h3 class="text-xl font-semibold">生产事故响应</h3>
                        </div>
                        <p>系统出现高CPU使用率问题。devops-incident-responder分析日志，performance-engineer识别瓶颈，database-optimizer优化慢查询，协作生成解决方案并记录到文档，快速恢复服务。</p>
                    </div>
                    
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4 font-bold">3</div>
                            <h3 class="text-xl font-semibold">AI驱动功能实现</h3>
                        </div>
                        <p>开发者构建RAG搜索系统。ai-engineer设计向量搜索管道，python-pro实现异步数据处理，docs-architect生成API文档，整个过程无缝衔接，减少手动整合。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pros & Cons Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="prose mx-auto">
                <h2 class="text-3xl font-bold mb-8">优势与特色</h2>
                
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-purple-700">核心优势</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-purple-100 text-purple-700 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <span><strong>专业化分工：</strong>75+子代理覆盖从前端到AI开发的广泛领域，优于通用AI模型的单一能力。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-purple-100 text-purple-700 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <span><strong>智能任务编排：</strong>支持顺序、并行和混合协作模式，相比Trello或Jira的手动任务分配更高效。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-purple-100 text-purple-700 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <span><strong>开源与本地化：</strong>基于AGPL-3.0许可，数据本地存储，无需云端依赖。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-purple-100 text-purple-700 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-check text-xs"></i>
                                </div>
                                <span><strong>集成文档与可视化：</strong>内置mermaid-expert和docs-architect，自动生成技术文档。</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-red-600">局限性</h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-red-100 text-red-600 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-exclamation text-xs"></i>
                                </div>
                                <span><strong>配置复杂性：</strong>需要熟悉Claude Code和YAML文件设置，对非技术用户有门槛。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-red-100 text-red-600 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-exclamation text-xs"></i>
                                </div>
                                <span><strong>API依赖：</strong>部分功能需Anthropic API密钥，可能增加成本。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-red-100 text-red-600 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-exclamation text-xs"></i>
                                </div>
                                <span><strong>社区维护：</strong>作为开源项目，90+开放问题可能影响新功能开发。</span>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-red-100 text-red-600 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3">
                                    <i class="fas fa-exclamation text-xs"></i>
                                </div>
                                <span><strong>解析错误：</strong>部分用户报告代理文件解析失败，需手动调试。</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="prose mx-auto">
                <h2 class="text-3xl font-bold mb-8">使用门槛与成本</h2>
                
                <div class="bg-gray-50 p-6 rounded-xl mb-8">
                    <p class="mb-4">Claude Agents是开源工具，核心功能免费，但需配置环境和API密钥。</p>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-white p-4 rounded-lg border border-gray-200">
                            <h3 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-gift text-purple-600 mr-2"></i>免费版本
                            </h3>
                            <p class="mb-2">核心功能完全免费，需自托管并安装Claude Code CLI。</p>
                            <div class="text-sm text-gray-500">
                                <p class="flex items-start mb-1">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                                    <span>无需注册即可使用</span>
                                </p>
                                <p class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2"></i>
                                    <span>手动安装至~/.claude/agents/目录</span>
                                </p>
                            </div>
                        </div>
                        
                        <div class="bg-white p-4 rounded-lg border border-gray-200">
                            <h3 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-star text-amber-500 mr-2"></i>高级功能
                            </h3>
                            <p class="mb-2">依赖Anthropic API（如Claude 3 Opus），成本依使用量而定。</p>
                            <div class="text-sm">
                                <a href="https://www.anthropic.com/api" class="text-purple-600 hover:text-purple-800 flex items-center mb-1">
                                    <i class="fas fa-external-link-alt mr-2"></i>
                                    <span>Anthropic API定价</span>
                                </a>
                                <a href="https://x.ai/api" class="text-purple-600 hover:text-purple-800 flex items-center">
                                    <i class="fas fa-external-link-alt mr-2"></i>
                                    <span>xAI API定价</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500 mb-8">
                    <p class="text-purple-700 font-medium flex items-start">
                        <i class="fas fa-question-circle mt-1 mr-2"></i>
                        <span>思考问题：你的团队是否有能力配置Claude Agents的环境，还是需要更简单的托管解决方案？</span>
                    </p>
                </div>
                
                <h3 class="text-xl font-semibold mb-4">技术要求</h3>
                <ul class="space-y-2 mb-8">
                    <li class="flex items-start">
                        <i class="fas fa-terminal text-purple-500 mt-1 mr-2"></i>
                        <span>需安装Claude Code CLI和Git，熟悉Markdown和YAML配置</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-memory text-purple-500 mt-1 mr-2"></i>
                        <span>最低硬件要求为2GB内存和500MB存储空间，推荐4GB内存</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section id="getting-started" class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="prose mx-auto">
                <h2 class="text-3xl font-bold mb-8">上手指南</h2>
                
                <div class="space-y-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">1</span>
                            安装先决条件
                        </h3>
                        <ul class="space-y-3 mb-6">
                            <li class="flex items-start">
                                <i class="fas fa-download text-purple-500 mt-1 mr-2"></i>
                                <span><strong>安装Git：</strong>Linux（<code>sudo apt install git</code>），macOS（<code>brew install git</code>），Windows（从<a href="https://git-scm.com" class="text-purple-600 hover:text-purple-800">git-scm.com</a>下载）</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-code text-purple-500 mt-1 mr-2"></i>
                                <span><strong>安装Claude Code CLI：</strong>从Anthropic官网下载，确保<code>claude</code>在PATH中（验证：<code>claude --version</code>）</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-key text-purple-500 mt-1 mr-2"></i>
                                <span><strong>配置Anthropic API密钥：</strong>在~/.claude/config中添加<code>ANTHROPIC_API_KEY=your_key_here</code></span>
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">2</span>
                            克隆代理集合
                        </h3>
                        <p class="mb-4">运行以下命令将Claude Agents安装到用户目录：</p>
                        <div class="code-block text-gray-200 p-4 mb-4">
                            <pre><code>cd ~/.claude
git clone https://github.com/wshobson/agents.git</code></pre>
                        </div>
                        <p>或安装到项目目录：</p>
                        <div class="code-block text-gray-200 p-4 mb-4">
                            <pre><code>git clone https://github.com/wshobson/agents.git .claude/agents</code></pre>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">3</span>
                            验证代理加载
                        </h3>
                        <p class="mb-4">运行<code>claude /agents</code>检查是否加载75+子代理。若失败，检查YAML文件格式或参考<a href="https://github.com/wshobson/agents/issues/52" class="text-purple-600 hover:text-purple-800">GitHub Issue #52</a>。</p>
                        <p>确保~/.claude/agents/包含子代理文件，如<code>backend-architect.md</code>、<code>frontend-developer.md</code>等。</p>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">4</span>
                            启动任务
                        </h3>
                        <ul class="space-y-3 mb-4">
                            <li class="flex items-start">
                                <i class="fas fa-magic text-purple-500 mt-1 mr-2"></i>
                                <span><strong>自动分配：</strong>在Claude Code输入："实现用户认证API。"系统自动调用<code>backend-architect</code>和<code>security-auditor</code></span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-terminal text-purple-500 mt-1 mr-2"></i>
                                <span><strong>显式调用：</strong>输入："使用frontend-developer创建React登录组件。"</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-list text-purple-500 mt-1 mr-2"></i>
                                <span><strong>查看代理列表：</strong><code>claude /agents list</code></span>
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">5</span>
                            管理多代理协作
                        </h3>
                        <p class="mb-2">示例：输入<code>/full-stack-feature 构建用户仪表板</code>，触发<code>backend-architect</code>、<code>frontend-developer</code>、<code>test-automator</code>等协作</p>
                        <p>检查上下文：使用<code>context-manager</code>查看任务历史，或<code>mermaid-expert</code>生成流程图</p>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 flex items-center">
                            <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-4">6</span>
                            故障排除
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-2"></i>
                                <span><strong>"代理未加载"：</strong>检查~/.claude/agents/路径和文件格式，确保无语法错误</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-key text-red-500 mt-1 mr-2"></i>
                                <span><strong>"API密钥无效"：</strong>验证密钥是否正确，参考<a href="https://www.anthropic.com/api" class="text-purple-600 hover:text-purple-800">Anthropic API文档</a></span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-memory text-red-500 mt-1 mr-2"></i>
                                <span><strong>内存不足：</strong>限制并行代理数量（如最多5个）</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>